<template>
	<coreshop-page title="提现明细" mode="left">
		<view class="box">
			<view class="select-box" :style="{'top':`${statusBarHeight}px`}" @click="onSelectFilterType">
				<view class="name">筛选类型:</view>
				<view class="selected">
					<text class="tit">{{state.selectFilterType}}</text>
					<uv-icon name="arrow-down"></uv-icon>
				</view>
			</view>

			<uv-picker ref="balanceFilterTypePickerRef" confirmColor="#D33123" :columns="state.balanceFilterTypes"
				@confirm="onConfirm"></uv-picker>

			<view class="list" v-if="state.list.length > 0">
				<view class="item" v-for="item in state.list" :key="item.id">
					<view class="header">
						<view class="type">{{item.statusName}}</view>
						<view class="remain">提现金额￥{{item.money}}</view>
					</view>
					<view class="withdraw_box">
						<view class="withdraw">
							<view class="money">提现卡号</view>
							<view class="date">{{item.cardNumber}}</view>
						</view>
						<view class="date">
							<view class="money">提现时间</view>
							<view class="date">{{item.createTime}}</view>
						</view>
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.history" text="暂无数据"></coreshop-empty>
			</view>

		</view>
	</coreshop-page>

</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { queryCashList } from '@/core/api';
	import type { Response, CashType } from '@/core/models';
	import { handleShowToast } from '@/core/utils';
	import { EmptyEnum } from '@/core/enum';
	import { useSystemInfo } from '@/core/hooks';

	// 获取自定义导航栏高度
	const { statusBarHeight } = useSystemInfo();

	const balanceFilterTypePickerRef = ref();

	const state = reactive<{
		balanceFilterTypes : Array<Array<string>>;
		selectFilterType : string;
		id : number;
		page : number;
		limit : number;
		list : Array<CashType>;
		totalPages : number;
	}>({
		balanceFilterTypes: [['全部', '待审核', '提现成功', '提现失败']],
		selectFilterType: '全部',
		id: 0,
		page: 1,
		limit: 10,
		list: [],
		totalPages: 1,
	})

	onLoad(() => {
		getCashList();
	});

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getCashList();
		}
	});

	/** 用户提现列表 */
	const getCashList = async () => {
		const cashList : Response<Array<CashType>> = await queryCashList({
			id: state.id,
			page: state.page,
			limit: state.limit,
		});
		if (cashList.status) {
			state.totalPages = cashList?.otherData?.totalPages;
			state.list = state.list.concat(cashList.data);
		} else {
			handleShowToast(cashList.msg)
		}
	}

	const onSelectFilterType = () => {
		balanceFilterTypePickerRef.value?.open();
	}
	const onConfirm = ({ indexs, value }) => {
		state.id = indexs[0];
		state.selectFilterType = value?.[0];
		state.list = [];
		state.page = 1;
		getCashList();
	}
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>